<template>
  <div class="postJobInfo">
    <Header />
    <div class="image">
      <div class="image-wrap">
        <img src="../../assets/image/fast-reg.png" alt="" />
        <div></div>
      </div>
    </div>
    <p>职位管理</p>
    <div class="postJobInfo-table">
      <el-button type="primary" style="float:right;margin-bottom:10px" @click="getAddJobInfo" >发布招聘信息</el-button>
      <el-table :data="jobListReverse" border style="width: 100%" max-height="400">
        <el-table-column prop="jobId" label="职位id" width="60" align="center">
        </el-table-column>
        <el-table-column prop="brandName" label="企业名称" width="200" align="center">
        </el-table-column>
        <el-table-column prop="jobName" label="职位名称" width="150" align="center">
        </el-table-column>
        <el-table-column
          prop="salaryDesc"
          label="薪资待遇"
          width="120"
          align="center"
        >
        </el-table-column>

        <el-table-column
          prop="jobExperience"
          label="工作经验需求"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="cityName"
          label="城市"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="jobDegree"
          label="学历要求"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="bossName"
          label="HR"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button
              @click="getDeleteJobInfo(scope.row, scope.$index)"
              type="text"
              size="small"
              >删除</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="getEditJobInfo(scope.row, scope.$index)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 招聘信息编辑弹窗 -->
    <el-dialog title="编辑招聘信息" :visible.sync="dialogFormVisibleEdit" width="30%">
      <el-form :model="jobListEdit" style="width:400px">
        <el-form-item label="职位名称" :label-width="formLabelWidth">
          <el-input v-model="jobListEdit.jobName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="薪资待遇" :label-width="formLabelWidth">
          <el-input v-model="jobListEdit.salaryDesc" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="工作经历要求" :label-width="formLabelWidth">
          <el-input v-model="jobListEdit.jobExperience" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="职位要求" :label-width="formLabelWidth">
          <el-input v-model="jobListEdit.jobDegree" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="城市" :label-width="formLabelWidth">
          <el-input v-model="jobListEdit.cityName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="HR" :label-width="formLabelWidth">
          <el-input v-model="jobListEdit.bossName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleEdit = false">取 消</el-button>
        <el-button type="primary" @click="getEditJobInfoConfirm">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 招聘信息发布弹窗 -->
    <el-dialog title="发布招聘信息" :visible.sync="dialogFormVisibleAdd" width="30%">
      <el-form :model="jobListAdd">
        <el-form-item label="职位名称" :label-width="formLabelWidth">
          <el-input v-model="jobListAdd.jobName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="薪资待遇" :label-width="formLabelWidth">
          <el-input v-model="jobListAdd.salaryDesc" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="工作经历要求" :label-width="formLabelWidth">
          <el-input v-model="jobListAdd.jobExperience" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学历要求" :label-width="formLabelWidth">
          <el-input v-model="jobListAdd.jobDegree" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="城市" :label-width="formLabelWidth">
          <el-input v-model="jobListAdd.cityName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="HR" :label-width="formLabelWidth">
          <el-input v-model="jobListAdd.bossName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleAdd = false">取 消</el-button>
        <el-button type="primary" @click="getAddJobInfoConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Header from '../../components/Header/index'
export default {
  name: 'postJobInfo',
  components: {Header},
  data() {
    return {
      jobListReverse: [],
      jobList: [],
      dialogFormVisibleEdit: false,
      // 编辑职位信息
      jobListEdit: {
        jobName: '', // 职位名称
        salaryDesc: '', // 薪资待遇
        jobExperience: '', // 工作经验要求
        jobDegree: '', // 学历要求
        cityName: '', // 城市
        bossName: '' // HR
      },
      dialogFormVisibleAdd: false,
      // 添加职位信息
      jobListAdd: {
        jobName: '', // 职位名称
        salaryDesc: '', // 薪资待遇
        jobExperience: '', // 工作经验要求
        jobDegree: '', // 学历要求
        cityName: '', // 城市
        bossName: '' // HR
      },
      formLabelWidth: '120px',
      Index: '',
      row: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getJobList()
  },
  mounted() {},
  methods: {
    getJobList() {
      this.$request.get('/api/api/JobInfo/GetInfo').then((res) => {
        // console.log(res)
        this.jobList = res.data
        this.jobListReverse = res.data.reverse()
      })
    },
    // 删除职位信息
    getDeleteJobInfo(row, index) {
      // console.log(row, index);
      const data = {
        jobId: row.jobId
      }
      this.$request.post('/api/api/JobInfo/Del',data).then((res) => {
        // console.log(res)
        // this.jobList = res
        this.getJobList()
      })
    },
    // 编辑职位信息
    getEditJobInfo(row, index) {
      this.dialogFormVisibleEdit = true
      // console.log(row, index);
      this.row = row
      this.jobListEdit = JSON.parse(JSON.stringify(row))
    },
    // 编辑职位信息确认按钮
    getEditJobInfoConfirm() {
      this.dialogFormVisibleEdit = false
      const data = {
        jobId: this.row.jobId, // 职位id
        jobName: this.jobListEdit.jobName, // 职位名称
        salaryDesc: this.jobListEdit.salaryDesc, // 薪资待遇
        jobExperience: this.jobListEdit.jobExperience, // 职位工作经验要求
        jobDegree: this.jobListEdit.jobDegree, // 学历要求
        brandName: this.row.brandName, // 企业名称
        brandLogo: this.row.brandLogo, // 企业logo
        brandStageName: this.row.brandStageName, // 企业融资情况
        brandIndustry: this.row.brandIndustry, // 企业类型
        brandScaleName: this.row.brandScaleName, // 企业规模
        cityName: this.jobListEdit.cityName, // 城市
        bossName: this.jobListEdit.bossName, // HR名字
        bossTitle: this.row.bossTitle, // HR标签
        bossAvatar: this.row.bossAvatar, // HR头像
        welfareList: '', // 福利待遇
      }
      // console.log(data);
      this.$request.post('/api/api/JobInfo/Update',data).then((res) => {
        // console.log(res)
        // this.jobList = res
        this.getJobList()
      })
    },
    // 发布招聘信息
    getAddJobInfo() {
      this.dialogFormVisibleAdd = true
    },
    // 发布招聘信息确认按钮
    getAddJobInfoConfirm() {
      this.dialogFormVisibleAdd = false
      const data = {
        jobName: this.jobListAdd.jobName, // 职位名称
        salaryDesc: this.jobListAdd.salaryDesc, // 薪资待遇
        jobExperience: this.jobListAdd.jobExperience, // 职位工作经验要求
        jobDegree: this.jobListAdd.jobDegree, // 学历要求
        brandName: this.jobList[0].brandName, // 企业名称
        brandLogo: this.jobList[0].brandLogo, // 企业logo
        brandStageName: this.jobList[0].brandStageName, // 企业融资情况
        brandIndustry: this.jobList[0].brandIndustry, // 企业类型
        brandScaleName: this.jobList[0].brandScaleName, // 企业规模
        cityName: this.jobListAdd.cityName, // 城市
        bossName: this.jobListAdd.bossName, // HR名字
        bossTitle: this.jobList[0].bossTitle, // HR标签
        bossAvatar: this.jobList[0].bossAvatar, // HR头像
        welfareList: '', // 福利待遇
      }
      // console.log(data);
      this.$request.post('/api/api/JobInfo/Add',data).then((res) => {
        // console.log(res)
        // this.jobList = res
        this.getJobList()
      })
    }
  },
}
</script>
<style scoped>
.postJobInfo{
  width: 100%;
  height: 100%;
}
.image {
  width: 100%;
  height: 120px;
  background-color: #5dd5cb;
}
.image-wrap {
  width: 1084px;
  margin: auto;
}
.image-wrap img {
  width: 354px;
  height: 120px;
}
.postJobInfo p {
  text-align: center;
  /* margin: 30px 0; */
  margin-top: 30px;
  margin-bottom: -30px;
  font-size: 20px;
}
.postJobInfo-table {
  width: 1055px;
  height: 400px;
  margin: auto;
  margin-top: 30px;
  margin-bottom: 40px;
  /* overflow: scroll; */
}
</style>